<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="zh">
<link href="css/bootstrap-responsive.css" type="text/css"
	rel="stylesheet">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>美味书签</title>
</head>
<body>
	<!-- 导航栏部分 -->
	<%@include file="header.jsp"%>
	<!-- 主体部分 -->
	<div id="main">
		<div class="container">
			<div class="row">
				<!-- 主页的左半面 -->
				<div id="mainbar" class="span9">
					<input id="tabType" type="hidden" value=<s:property value="tabType"/> >
					<ul class="nav nav-tabs">
						<li class="active infoTab"><a data-toggle="tab"
							href="#profile"> 头像</a></li>
						<li class="pwdTab"><a data-toggle="tab" href="#password">密码</a></li>
					</ul>
					<div class="tab-content">
						<!-- 添加头像部分 -->
						<div id="profile" class="infoTab tab-pane fade active in">
							<form action="updateInfo" method="post"
								enctype="multipart/form-data">
								<h2>添加头像</h2>
								<div class="control-group">
									<div class="controls">
										<input name="avatar" class="input-file" type="file">
									</div>
								</div>
								<h2>个人描述</h2>
								<textarea name="intro" class="input-xlarge" rows="3"
									placeholder="告诉美味书签更多关于你"><s:property value="user.introduce" /></textarea>
								<h2>电子邮件</h2>
								<input id="email" type="text" class="span5"
									value="<s:property value="user.email"/>"
									placeholder="电子邮箱关联以便修改密码">
								<s:if test="infoEditFlag">
									<s:if test="infoSuccessFlag">
										<div class="alert alert-success">
											<a class="close" data-dismiss="alert" href="#">×</a> 修改成功
										</div>
									</s:if>
									<s:else>
										<div class="alert alert-error">
											<a class="close" data-dismiss="alert" href="#">×</a>图片格式错误
										</div>
									</s:else>
								</s:if>
								<div class="form-actions">
									<font style="float: right;">
										<button class="btn btn-primary" type="submit">保存</button>
										<button class="btn" type="reset">取消</button>
									</font>
								</div>
							</form>
						</div>

						<!-- 密码修改模块 -->
						<div id="password" class="pwdTab tab-pane fade">
							<form id="pwdForm" action="updatePwd" method="post">
								<h2>密码修改</h2>
								<br>
								<h4>原密码</h4>
								<input id="oldpassword" name="oldPassword" type="password"
									class="span5">
								<h4>新密码</h4>
								<input id="newpassword" name="newPassword" type="password"
									class="span5">
								<h4>确认密码</h4>
								<input id="repassword" type="password" class="span5">

								<s:if test="pwdEditFlag">
									<s:if test="pwdSuccessFlag">
										<div class="alert alert-success">
											<a class="close" data-dismiss="alert" href="#">×</a> 修改成功
										</div>
									</s:if>
									<s:else>
										<div class="alert alert-error">
											<a class="close" data-dismiss="alert" href="#">×</a>密码错误
										</div>
									</s:else>
								</s:if>
								<div class="form-actions">
									<font style="float: right;">
										<button id="submitPwd" class="btn btn-primary" type="submit">提交</button>
									</font>
								</div>
							</form>
						</div>
					</div>
				</div>
				<!-- 主頁的有半部份 -->
				<div id="sidebar" class="span3">
					用户信息
					<div class="sidebarProfilePic subtleShadow">
						<img width="150" height="150" alt="profile pic"
							src="upload/<s:property value="user.avatar"/>">
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="js/jquery-1.7.2.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/jquery.tagsinput.js"></script>
	<script src="js/application.js"></script>
	<script>
		$(function() {
			$('#myTab a').click(function(e) {
				e.preventDefault();
				$(this).tab('show');
			});

			$('#submitPwd').click(function() {
				var newpwd = $("#newpassword").val();
				var repwd = $("#repassword").val();
				if (newpwd != "" && repwd === newpwd)
					$("#pwdForm").submit();
				else
					alert("密码不一致,请重新输入");
				return false;
			});
			
			var tabType=$('#tabType').val();
			if (tabType === "infoTab") { 
				$(".infoTab").addClass("active");
				$(".pwdTab").removeClass("active");
			} else if (tabType === "pwdTab") {
				$(".infoTab").removeClass("active");
				$(".pwdTab").addClass("active");
			}
		});
	</script>
</body>
</html>